<template>
  <div class="activity">
    <el-row>
      <el-col class="text-center" :lg="12" :xl="10">
        <LiveOverview :tabs="tabs" :show-time="false" :show-item-class="false" />
      </el-col>
      <el-col :lg="12" :xl="14">
        <BarChart :title="title" :data-x="dataX" :data-y="dataY" :showZoom="true" />
      </el-col>
    </el-row>

    <PageTable :columns="columns" :data="dataSource" />

    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getDetailList"
    />
  </div>
</template>

<script>
import { useFilterStatistics } from '@/hooks'
export default {
  name: 'ActivityList',
  components: {},
  props: {},
  data() {
    return {
      tabs: [
        {
          isShow: true,
          baseData: {
            key: 'userSum',
            label: '总兑换用户数',
            value: ''
          },
          yesterdayData: {
            key: 'ydayUserSum',
            isShow: true,
            value: ''
          },
          itemStyle: {
            margin: '30px 20px 0 20px'
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'couponSum',
            label: '总礼品张数',
            value: ''
          },
          itemStyle: {
            margin: '30px 0 0 20px'
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'convertSum',
            label: '总兑换次数',
            value: ''
          },
          yesterdayData: {
            key: 'ydayConvertSum',
            isShow: true,
            value: ''
          },
          itemStyle: {
            margin: '30px 20px 0 20px'
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'integralSum',
            label: '总积分发放数',
            value: ''
          },
          yesterdayData: {
            key: 'ydayIntegralSum',
            isShow: true,
            value: ''
          },
          itemStyle: {
            margin: '30px 0 0 20px'
          }
        }
      ],
      title: {
        text: '近30天扫码兑换概况',
        left: '1%'
      },
      dataX: [],
      dataY: [],
      tooltip: {
        trigger: 'axis'
      },
      columns: [
        {
          prop: 'couponName',
          label: '礼品券名称'
        },
        {
          prop: 'couponCode',
          label: '兑换码'
        },
        {
          label: '兑换人信息',
          render: (h, { row }) => {
            return (
              <div>
                <div class={row.baseUserInfo?.isNew ? 'flex' : ''}>
                  <div>{row.baseUserInfo?.nickName}</div>
                  {row.baseUserInfo.isNew ? (
                    <el-tag
                      class="ml-5"
                      style={'height: 20px;line-height: 20px;padding:0 5px;'}
                      type="danger"
                      effect="dark"
                    >
                      新用户
                    </el-tag>
                  ) : (
                    ''
                  )}
                </div>
                <div>{row.baseUserInfo?.mobile}</div>
              </div>
            )
          }
        },
        {
          label: '兑换张数',
          render: () => {
            return <span>x1</span>
          }
        },
        {
          label: '获得积分',
          render: (h, { row }) => {
            return <span>+{row.integral}</span>
          }
        },
        {
          label: '销售渠道',
          prop: 'storeName',
          render: (h, { row }) => {
            return <div>{row.storeName ? row.storeName : '暂无'}</div>
          }
        },
        {
          label: '兑换方式',
          render: () => {
            return <span>小程序扫码</span>
          }
        },
        {
          prop: 'usedTime',
          label: '兑换时间'
        }
      ],
      dataSource: [],
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  created() {
    this.getActivityCount()
    this.getCountSale()
    this.getDetailList()
  },
  methods: {
    // 获取礼品兑换记录
    async getDetailList() {
      const params = {
        ...this.listQuery
      }
      const {
        data: { total, records }
      } = await this.$http.coupon.activityApi.getDetailList(params)
      this.dataSource = records
      this.total = total
    },
    // 获取30天兑换记录统计
    async getActivityCount() {
      const { data } = await this.$http.coupon.activityApi.getActivityCount()
      const list = Object.entries(data)
        .map(item => {
          return {
            time: item[0],
            value: item[1]
          }
        })
        .sort((a, b) => {
          return this.$moment(a.time).unix() - this.$moment(b.time).unix()
        })
      this.dataX = list.map(item => item.time)
      this.dataY = [list.map(item => item.value)]
    },
    // 获取礼品券兑换明细
    async getCountSale() {
      const { data } = await this.$http.coupon.activityApi.getCountSale()
      const {
        convertSum,
        couponSum,
        integralSum,
        userSum,
        ydayConvertSum,
        ydayIntegralSum,
        ydayUserSum
      } = data
      const tabsData = {
        baseData: {
          convertSum,
          couponSum,
          integralSum,
          userSum
        },
        yesterdayData: {
          ydayConvertSum,
          ydayIntegralSum,
          ydayUserSum
        }
      }
      this.tabs = useFilterStatistics(this.tabs, tabsData)
    }
  }
}
</script>

<style lang="scss" scoped></style>
